<template>
  <div class="choose-modal">
    <BaseModal
      v-model="show"
      width="400"
      class="delete-modal"
      @on-visible-change="modalChange"
      @on-ok="confirmChoose"
      @on-cancel="cancel"
      :title="title"
      simple
    >
      <div style="padding-left:14px">
        <RadioGroup vertical v-model="doCbType">
          <Radio :label="1">勾选对象</Radio>
          <Radio :label="2">全部查询结果</Radio>
        </RadioGroup>
      </div>
    </BaseModal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import BaseModal from "@components/iv-modal/BaseModal.vue";
import { Tools } from "@/model/tools.ts";
@Component({
  components: {
    BaseModal
  }
})
export default class ChooseModal extends Tools {
  @Prop({ default: false })
  private value!: boolean;
  @Prop()
  private title!: String;

  public doCbType: number = 1;

  // show的计算属性
  private get show() {
    return this.value;
  }
  private set show(value) {
    this.$emit("input", value);
  }

  /**
   * 点击on-ok派发事件到父组件DataCalendar.vue调用deleteConfirm()方法
   */
  private confirmChoose() {
    this.$emit("confirm", this.doCbType);
  }
  private cancel() {
    this.show = false;
  }
  private modalChange(value) {
    if (!value) {
      this.doCbType = 1;
    }
    if (this.show && !value) {
      this.show = false;
    }
  }
}
</script>
<style lang="stylus" scoped>
.delete-modal {
  >>>.ivu-modal-header {
    border: 0
  }
  >>>.ivu-modal-footer {
    border: 0
  }
  >>>.ivu-modal-body {
    padding: 0 16px
  }
}
</style>
